<template>

    <block v-if="token">
		<view class="gru">共记录了<text>{{total}}</text>条祠堂信息</view>
		<view class="listbg">
			<view class="listitem" @click="godetail(item)" v-for="item in list" :key="item.id">
				<image :src="item.img" mode="aspectFill" lazy-load></image>
				<view class="itemr">
					<text>{{item.name}}-{{item.address}}</text>
					<view class="l2">{{item.introduce}}</view>
					<view class="flex-center btn">祭祖</view>
				</view>
			</view>
		</view>
		<up-loadmore  lineColor="#ccc" line	 :status="status" />
	</block>
    <block v-else>
		<view class="gologin flex-center" @click="gologin">前往登录</view>
		
	</block>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import { ancestralList } from "@/api/ancestra.js"
	import {
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';

	function godetail(e) {
		uni.setStorageSync('ancestralInfo',e)
		uni.navigateTo({
			url: "/pages/ancestral/detail"
		})
	}
	function gologin(){
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}
	
	onReachBottom(() => {
		page.value++
		getList()
	})


	onLoad((e) => {	
	   if(uni.getStorageSync('token')){
		   getList()	
	   }
		
	})
	let token=ref('')
	onShow(()=>{
		token.value=uni.getStorageSync('token')||''
	})
	let titindex=ref(0)
	function settitindex(e){
		titindex.value=e
		page.value=1
		list.value=[]
		getList()
	}
	
	
	let status=ref('')
	
	let list = ref([])
	
	let page=ref(1)
	
	let total=ref(0)
	
	function getList() {
		
		let data = {
			pageSize: 10,
			pageNum: page.value,
		}
		status.value='loading'
		
		ancestralList(data).then(res => {
			status.value='nomore'
			total.value=res.total
			if (page.value == 1) {
				list.value = res.rows
			
			} else {
				
				if (res.rows.length == 0) {
					page.value--
				
					return
				} else {
					list.value = [...list.value, ...res.rows]
                
				}


			}
		})

	}

</script>



<style lang="scss">
	.gologin{
		     margin-top:300rpx;
		    width: 690rpx;
		    height: 80rpx;
		    background: #C7A46F;
		    border-radius: 40rpx;
		    font-family: PingFang-SC, PingFang-SC;
		    font-weight: 500;
		    font-size: 24rpx;
		    margin-left: 30rpx;
		    color: #FFFFFF;
	}
	.listbg {
		margin-left: 30rpx;
		overflow: hidden;

		.listitem {
			width: 690rpx;
			height: 248rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 24rpx;

			&>image {
				width: 150rpx;
				height: 200rpx;
				background: #C8C8C8;
				margin-left: 24rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
			}

			.itemr {
				width: 466rpx;

				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				margin-left: 20rpx;
				display: flex;
				height: 200rpx;
				flex-direction: column;
				justify-content: space-between;

				&>text {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
				}

				.l2 {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.btn {
					width: 140rpx;
					height: 60rpx;
					background: #C7A46F;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-left: 326rpx;
				}
			}
		}

	}

	.gru {
		text-align: center;
		margin-top: 40rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #AAAAAA;

		text {
			font-weight: bold;
			color: #A9070C;
		}
	}

	.tabsbg {
		width: 750rpx;
		white-space: nowrap;

		.tabsitem {
			margin-left: 30rpx;
			width: 166rpx;
			height: 80rpx;
			display: inline-flex;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
			color: #C0C0C0;
			border: 1rpx solid #FFFFFF;
		}

		.active {
			border: 1rpx solid #111111;
			color: #111111;
		}
	}
</style>